<template>
	<router-link :to="`/goods/detail/${goods.pre_goods_id}`" class="goods-item">
		<img :src="goods.cover_pic" v-show="imgLoad" @load="imgLoad=true">
		<img :src="placeholder1" v-if="!imgLoad">
		<div class="item-detail">
			<p class="title ellipsis2L">{{goods.description}}</p>
			<p class="clear">
				<span class="fl c-txt colored">￥{{goods.price}}</span>
				<span class="fr c-txt">已售：{{goods.sales_num}}</span>
			</p>
			<Bonus :bonus="goods.bonus"></Bonus>
		</div>
	</router-link>
</template>
<script>
import Bonus from './Bonus'
import placeholder1 from '@/assets/img/common/placeholder1.png'
export default{
	name:'GoodsItem',
	data(){
		return{
			imgLoad: false,
			placeholder1: placeholder1
		}
	},
	props: ['goods'],
	components: {Bonus}
}
</script>
<style lang='less' scoped>
.goods-item{
	padding-bottom: .2rem;
	background: #fff;
	width: 100%;
	display: inline-block;
	img{
		width: 100%;
		height: 4.93rem;
	}
	.item-detail{
		padding: .25rem .21rem;
		.title{
			font-size: .34rem;
			color: #5c5c5c;
			line-height: .48rem;
		}
	}
}
</style>